<template>
	<section>
		<!--工具条-->
		<el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
			<el-form :inline="true" :model="filters">
				<el-form-item prop="date">
					<el-date-picker
						v-model="filters.date"
						range-separator="至"
						type="datetimerange"
						placeholder="选择时间范围">
					</el-date-picker>
				</el-form-item>
				<el-form-item>
					<el-select v-model="filters.status" clearable placeholder="状态">
						<el-option
							v-for="item,index in statusList"
							:label="item.name"
							:value="item.id"
							:key="index">
						</el-option>
					</el-select>
				</el-form-item>
				<el-form-item>
					<el-select v-model="filters.type" clearable placeholder="商家类型">
						<el-option
							v-for="item,index in typeList"
							:label="item.name"
							:value="item.id"
							:key="index">
						</el-option>
					</el-select>
				</el-form-item>
				<el-form-item>
					<el-input v-model="filters.keyword" placeholder="输入店铺名称查找"></el-input>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" v-on:click="getUsers">查询</el-button>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" v-on:click="showCheck('2')">审核通过</el-button>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" v-on:click="showCheck('3')">审核不通过</el-button>
				</el-form-item>
			</el-form>
		</el-col>
		
		<!--列表-->
		<el-table :data="users" highlight-current-row v-loading="listLoading" @selection-change="selsChange" style="width: 100%;">
			<el-table-column type="selection" width="35">
			</el-table-column>
			<el-table-column type="expand">
				<template slot-scope="scope">
					<div>
						<span>商家图片：</span>
						<img v-for="item,index in scope.row.pics" :key="index" :src="item" width="60" height="60" align="center" style="margin-right: 10px;" />
					</div>
					<div style="margin-top: 20px;">
						<span>商家资质：</span>
						<img v-for="item,index in scope.row.aptitudeImage" :key="index" :src="item" width="60" height="60" align="center" style="margin-right: 10px;" />
					</div>
				</template>
			</el-table-column>
			<el-table-column type="index" label="序号" width="65" align="center">
			</el-table-column>
			<el-table-column prop="name" label="商家名称" align="center">
			</el-table-column>
			<!--<el-table-column prop="pics" label="商家图片" align="center" :formatter="formatSex">
				<template scope="scope">
					<img v-for="item in scope.row.pics" :src="item" width="40" height="40" align="center" />
				</template>
			</el-table-column>-->
			<el-table-column prop="introduce" label="商家简介" align="center" min-width="160">
			</el-table-column>
			<el-table-column prop="typeStr" label="商家类型" align="center">
			</el-table-column>
			<el-table-column prop="statusStr" label="状态" align="center" :formatter="formatShopStatus">
			</el-table-column>
			<el-table-column prop="phone" label="电话" align="center">
			</el-table-column>
			<el-table-column prop="address" label="地址" align="center">
			</el-table-column>
			<el-table-column prop="openTime" label="营业时间" align="center" min-width="100">
			</el-table-column>
			<!--<el-table-column prop="aptitudeImage" label="营业资质" align="center">
				<template scope="scope">
					<img v-for="item in scope.row.aptitudeImage" :src="item" width="40" height="40" align="center" />
				</template>
			</el-table-column>-->
			<el-table-column prop="createTime" label="创建时间" align="center" min-width="140" :formatter="formatDateTime">
			</el-table-column>
			<el-table-column label="操作"  align="center" min-width="200">
				<template slot-scope="scope">
					<el-button size="small" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
					<el-button v-if="scope.row.statusStr=='1'||scope.row.statusStr=='2'" size="small" @click="closeEnterShop(scope.$index, scope.row)">关闭</el-button>
					<el-button v-if="scope.row.statusStr=='3'||scope.row.statusStr=='4'" type="danger" size="small" @click="showReason(scope.$index, scope.row)">查看原因</el-button>
				</template>
			</el-table-column>
		</el-table>
		
		<!--工具条-->
		<div class="toolbar" style="display: flex;justify-content: flex-end;">
			<el-pagination
				@size-change="handleSizeChange"
				@current-change="handleCurrentChange"
				:current-page="currentPage"
				:page-sizes="[10, 20, 30, 40]"
				:page-size="size"
				layout="total, sizes, prev, pager, next, jumper"
				:total="total">
			</el-pagination>
		</div>
		
		<!--编辑界面-->
		<el-dialog title="编辑店铺" v-model="editFormVisible" :close-on-click-modal="false" @close="editorClose">
			<el-form :model="editForm" label-width="80px" :rules="editFormRules" ref="editForm">
				<el-form-item label="商家名称" prop="name">
					<el-input type="text" v-model="editForm.name" placeholder="输入商家名称" auto-complete="off" :maxlength="30"></el-input>
				</el-form-item>
				<el-form-item label="商家图片">
					<div v-for="item,index in this.tempPics" :key="index" style="float:left;position:relative;" @click="delPics(item)">
						<img :src="item" width="150" height="150" align="center" />
					</div>
					<el-upload class="upload-demo" action="/file/upload"
					           name="file"
					           :data="fileType1"
					           :on-success="onSuccess1"
					           :on-error="onError1"
					           multiple
					           :limit="5"
					           list-type="picture-card"
					           :file-list="fileList1"
					           :on-remove="handleRemove1"
					>
						<i class="el-icon-plus"></i>
						<div slot="tip" class="el-upload__tip">最多添加5张，首张为封面图</div>
					</el-upload>
				</el-form-item>
				<!-- <el-form-item label="图片成功地址:" prop="image" v-show="false">
	              <el-input  v-model="editForm.image" auto-complete="off" placeholder="请输入url地址"></el-input>
	            </el-form-item> -->
				<el-form-item label="商家简介" prop="introduce">
					<el-input type="textarea" placeholder="输入商家简介" v-model="editForm.introduce" :maxlength="100"></el-input>
				</el-form-item>
				<el-form-item label="商家类型" prop="typeId">
					<el-select v-model="editForm.typeId" clearable :placeholder="editForm.typeStr">
						<el-option
							v-for="item,index in typeList"
							:label="item.name"
							:value="item.id"
							:key="index">
						</el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="状态" prop="statusId">
					<el-select v-model="editForm.statusId" clearable :placeholder="editForm.statusStr">
						<el-option
							v-for="item,index in statusList"
							:label="item.name"
							:value="item.id"
							:key="index">
						</el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="电话" prop="phone">
					<el-input v-model="editForm.phone" placeholder="输入手机号码" max-length="11"></el-input>
					<!--<el-input type="number" v-model="editForm.phone" placeholder="输入手机号码" max-length="11"></el-input>-->
				</el-form-item>
				<el-form-item label="地址">
					<!-- <el-select v-model="editForm.provinceId" clearable :placeholder="editForm.provinceStr" @change="pChange">
						<el-option
							v-for="item in pList"
							:label="item.name"
							:value="item.id">
						</el-option>
					</el-select>
					<el-select v-model="editForm.cityId" clearable :placeholder="editForm.cityStr" @change="cChange">
						<el-option
							v-for="item in cList"
							:label="item.name"
							:value="item.id">
						</el-option>
					</el-select>
					<el-select v-model="editForm.regionId" clearable :placeholder="editForm.regionStr" @change="rChange">
						<el-option
							v-for="item in rList"
							:label="item.name"
							:value="item.id">
						</el-option>
					</el-select> -->
					<el-input type="text" v-model="editForm.address" placeholder="输入详细地址"></el-input>
				</el-form-item>
				<el-form-item label="营业时间">
					<el-time-picker placeholder="开始时间" v-model="editForm.startTime"></el-time-picker>
					~
					<el-time-picker placeholder="结束时间" v-model="editForm.endTime"></el-time-picker>
				</el-form-item>
				<el-form-item label="商铺经纬度">
					<a href="http://lbs.amap.com/console/show/picker" target="_blank">点击跳转获取经纬度</a>
					<el-input v-model="editForm.grid"></el-input>
				</el-form-item>
				<el-form-item label="商家资质">
					<div v-for="item,index in this.tempAptitudeImg" :key="index" style="float:left;position:relative;" @click="delAptitudeImg(item)">
						<img :src="item" width="150" height="150" align="center" />
					</div>
					<!-- <img v-for="item in editForm.aptitudeImages" :src="item" width="100" height="100" align="center" /> -->
					<el-upload class="upload-demo" action="/file/upload"
					           name="file"
					           :data="fileType2"
					           :on-success="onSuccess2"
					           :on-error="onError2"
					           multiple
					           list-type="picture-card"
					           :file-list="fileList2"
					           :on-remove="handleRemove2"
					>
						<i class="el-icon-plus"></i>
						<div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
					</el-upload>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click.native="editFormVisible = false">取消</el-button>
				<el-button type="primary" @click.native="editSubmit" :loading="editLoading">保存</el-button>
			</div>
		</el-dialog>
		
		<!--查看原因界面-->
		<el-dialog :model="showForm"  ref="showForm" title="查看原因" v-model="showFormVisible" :close-on-click-modal="false">
			<p style="color:red">状态：不通过</p>
			<p style="color:#333">{{showForm.reason}}</p>
			<div slot="footer" class="dialog-footer">
				<el-button @click.native="showFormVisible = false">取消</el-button>
			</div>
		</el-dialog>
		
		<!--新增界面-->
		<el-dialog title="审核不通过" v-model="checkFormVisible" :close-on-click-modal="false">
			<el-form :model="checkForm" label-width="80px" :rules="checkFormRules" ref="checkForm">
				<el-form-item label="原因" prop="reason">
					<el-input v-model="checkForm.reason" auto-complete="off" placeholder="输入审核不通过原因" :maxlength="30"></el-input>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click.native="checkFormVisible = false">取消</el-button>
				<el-button type="primary" @click.native="checkEnterShop('3')" :loading="addLoading">提交</el-button>
			</div>
		</el-dialog>
	</section>
</template>
<script>
	import { getEnterShopList, updateEnterShop, closeEnterShop, checkEnterShop, viewEnterShopRejectedReason ,shopTypeList,getAreaList} from '../../api/api';
	
	export default {
		data() {
			return {
				filters: {
					date: '',
					type: '',
					status: '',
					keyword: ''
				},
				start: '',
				end: '',
				pickerBeginDateBefore:{
					disabledDate: (time) => {
						let beginDateVal = this.filters.endTime;
						if (beginDateVal) {
							return time.getTime() > beginDateVal;
						}
					}
				},
				pickerBeginDateAfter:{
					disabledDate: (time) => {
						let beginDateVal = this.filters.startTime;
						if (beginDateVal) {
							return time.getTime() < beginDateVal;
						}
					}
				},
				users: [
					// {
					// 	name: '商家名称1',
					// 	pics: ['1','2','3'],
					// 	introduce: "商家介绍1",
					// 	typeStr: '类型1',
					// 	statusStr: '营业中',
					// 	phone: '17621211755',
					// 	address: '上海市普陀区武宁智慧园',
					// 	openTime: "9:00-20:00",
					// 	aptitudeImage: [],
					// 	createTime: "2017-10-10 10:10"
					// }
				],
				pList:[],//省列表
				cList:[],//市列表
				rList:[],//区列表
				tempPics:[],
				tempAptitudeImg:[],
				typeList:[],
				statusList:[{
					name:'审核中',
					id:'1'
				},{
					name:'营业中',
					id:'2'
				},{
					name:'不通过',
					id:'3'
				},{
					name:'已关闭',
					id:'4'
				}],
				total: 0,
				currentPage: 1,
				size: 10,
				listLoading: false,
				sels: [],//列表选中列
				
				showFormVisible:false,
				addLoading: false,
				editFormVisible: false,//编辑界面是否显示
				editLoading: false,
				editFormRules: {
					name: [
						{ required: true, message: '请输入姓名', trigger: 'blur' }
					],
					introduce : [
						{ required: true, message: '请输入商家简介', trigger: 'blur' },
					],
					phone : [
						{ required: true, message: '请输入商家电话', trigger: 'blur' },
					],
					address : [
						{ required: true, message: '请输入商家地址', trigger: 'blur' },
					],
					pics: [
						{ required: true, message: '请选择商家图片', trigger: 'blur' },
					]
				},
				//编辑界面数据
				editForm: {
					id:"",
					name: '',
					picss: [],
					introduce: "",
					typeId: '',
					statusId: '',
					phone: '',
					provinceId: "",
					cityId: "",
					regionId: "",
					address: '',
					aptitudeImages: [],
					startTime:"",
					endTime:"",
					grid: '',
				},
				
				checkFormVisible: false,//原因界面是否显示
				checkLoading: false,
				checkFormRules: {
					reason: [
						{ required: true, message: '请输入审核不通过原因', trigger: 'blur' }
					]
				},
				//新增界面数据
				checkForm: {
					reason:""
				},
				//查看原因数据
				showForm:{
					reason:"内容资料不完整，有错误!"
				},
				fileType1:{
					"fileType" : "SUMMARY_EVENT"
				},
				fileList1: [],
				fileType2:{
					"fileType" : "SUMMARY_EVENT"
				},
				fileList2: [],
				tempPID:0,//省ID
				tempCID:0,//市ID
				tempRID:0,//区ID
				tempTID:0,//商家类型
			}
		},
		methods: {
			getTime() { // 时间处理
				let starttime,endtime = ''
				let time = this.filters.date;
				if(!time[0] == '') {
					starttime = this.moment(time[0]).format('YYYY-MM-DD HH:mm:ss')
				}
				if(!time[1] == '') {
					endtime = this.moment(time[1]).format('YYYY-MM-DD HH:mm:ss');
				}
				if(starttime == "Invalid date"){
					starttime="";
				};
				if(endtime == "Invalid date"){
					endtime="";
				};
				this.start = starttime
				this.end = endtime
			},
			//类别显示转换
			formatShopStatus: function (row, column){
				return row.statusStr == 1 ? '审核中' : row.statusStr == 2 ? '营业中' : row.statusStr == 3 ? '不通过' : row.statusStr == 4 ? '已关闭': '未知';
			},
			formatDateTime: function (row, column){
				var date = row[column.property];
				if (date == undefined) {
					return "";
				}
				return this.moment(date).format("YYYY-MM-DD HH:mm:ss");
			},
			changeToDateStr:function(date){
				return this.moment(date).format("YYYY-MM-DD HH:mm:ss");
			},
			changeToTimeStr:function(date){
				return this.moment(date).format("HH:mm:ss");
			},
			handleSizeChange(val) {
				this.size = val
				this.getUsers();
			},
			handleCurrentChange(val) {
				this.currentPage = val;
				this.getUsers();
			},
			//获取商家列表
			getUsers() {
				this.getTime();
				let para = {
					pageIndex: this.currentPage,
					pageSize: this.size,
					status: this.filters.status,
					type: this.filters.type,
					name: this.filters.keyword
				};
				if(!this.start == '') {
					para.startTime = this.start
				} else {
					para.startTime = null
				}
				if(!this.end == '') {
					para.endTime = this.end
				} else {
					para.endTime = null
				}
				this.listLoading = true;
				getEnterShopList(para).then((res) => {
					if (res.code == 0) {
						this.listLoading = false;
						this.users = res.data.data;
						this.total = res.data.totalCount
					}else{
						this.$message({
							message: res.msg,
							type: 'error'
						});
					}
					this.listLoading = false;
					//NProgress.done();
				});
			},
			//获取商家分类列表
			getTypeList() {
				let para = {
					pageIndex: 1,
					pageSize: 100,
					startTime: null,
					endTime: null,
				};
				console.log(para);
				shopTypeList(para).then((res) => {
					console.log(res);
					if (res.code == 0) {
						this.typeList = res.data.data;
					}
				});
			},
			
			//获取地址
			getArea(type,id){
				let para = {
					pageIndex: 1,
					pageSize: 10000,
					type: type,
					parentId: id,
				};
				console.log(para);
				getAreaList(para).then((res) => {
					console.log(res);
					if (res.code == 0) {
						if (type == 1) {
							this.pList = res.data;
						}else if (type == 2){
							this.cList = res.data;
						}else if (type == 3){
							this.rList = res.data;
						}
					}
				});
			},
			//切换省
			pChange: function(){
				console.log("切换省"+this.editForm.provinceId);
				this.getArea(2,this.editForm.provinceId);
				// this.editForm.cityId = null;
				// this.editForm.regionId = null;
			},
			//切换市
			cChange: function(){
				console.log("切换市"+this.editForm.cityId);
				this.getArea(3,this.editForm.cityId);
			},
			//切换区
			rChange: function(){
				console.log("切换区"+this.editForm.regionId);
			},
			//显示编辑界面
			handleEdit: function (index, row) {
				this.tempPics = [];
				this.tempAptitudeImg = [];
				this.editFormVisible = true;
				this.editForm =  Object.assign({}, row);
				this.editForm.aptitudeImages = []
				this.editForm.picss = []
				this.editForm.grid = row.longitude + ',' + row.latitude
				this.tempPics = [...row.pics];
				this.tempAptitudeImg = [...row.aptitudeImage];
				this.statusList.map(v => {
					if(v.id == row.statusStr) {
						this.editForm.statusId = v.name
					}
				})
				this.editForm.startTime = this.changeToDateStr('2018-01-01'+' '+this.editForm.startTime);
				this.editForm.endTime = this.changeToDateStr('2018-01-01'+' '+this.editForm.endTime);
				this.tempPID = this.editForm.provinceId;
				this.tempCID = this.editForm.cityId;
				this.tempRID = this.editForm.regionId;
				this.tempTID = this.editForm.typeId;
				this.editForm.provinceId=null;
				this.editForm.cityId=null;
				this.editForm.regionId=null;
				this.editForm.typeId=null;
			},
			editorClose() { // 关闭编辑页面
				this.tempPics = [];
				this.tempAptitudeImg = [];
			},
			//查看原因
			showReason: function (index, row) {
				let para = { id: row.id };
				viewEnterShopRejectedReason(para).then((res) => {
					this.addLoading = false;
					if (res.code == 0) {
						this.showForm.reason = res.data.reason;
						this.showFormVisible = true;
					}else{
						this.$message({
							message: res.message,
							type: 'error'
						});
					}
				});
			},
			//关闭商家
			closeEnterShop:function(index, row){
				this.$confirm('确认关闭该商家吗?', '提示', {
					type: 'warning'
				}).then(() => {
					this.listLoading = true;
					//NProgress.start();
					let para = { id: row.id };
					closeEnterShop(para).then((res) => {
						this.listLoading = false;
						//NProgress.done();
						if(res.code == 0) {
							this.$message({
								message: '删除成功',
								type: 'success'
							});
							this.getUsers();
						} else {
							this.$message({
								message: res.message,
								type: 'error'
							});
						}
					});
				}).catch(() => {
				
				});
			},
			//编辑提交
			editSubmit() {
				this.$refs.editForm.validate((valid) => {
					if (valid) {
						this.$confirm('确认提交吗？', '提示', {}).then(() => {
							this.editLoading = true;
							//let info = Object.assign({}, this.editForm);
							if (!this.editForm.startTime || this.editForm.startTime=='') {
								this.editForm.startTime = null;
							}else{
								this.editForm.startTime = this.changeToDateStr(this.editForm.startTime);
							}
							if (!this.editForm.endTime || this.editForm.endTime=='') {
								this.editForm.endTime = null;
							}else{
								this.editForm.endTime = this.changeToDateStr(this.editForm.endTime);
							}
							var curTypeId = 0;
							if (!this.editForm.typeId) {
								curTypeId =  this.tempTID;
								if (!this.tempTID) {
									curTypeId = 0;
								};
							}else{
								curTypeId = this.editForm.typeId;
							}
							let para = {
								id:this.editForm.id,
								name: this.editForm.name,
								introduce: this.editForm.introduce,
								typeId: curTypeId,
								phone: this.editForm.phone,
								provinceId: !this.editForm.provinceId?this.tempPID:this.editForm.provinceId,
								cityId: !this.editForm.cityId?this.tempCID:this.editForm.cityId,
								regionId: !this.editForm.regionId?this.tempRID:this.editForm.regionId,
								address: this.editForm.address,
								start_time: this.editForm.startTime,
								end_time: this.editForm.endTime,
							};
							this.statusList.map(v => {
								if(v.name == this.editForm.statusId) {
									para.status = v.id
								}
							})
							para.pics = [...this.editForm.picss,...this.tempPics]
							para.aptitudeImages = [...this.editForm.aptitudeImages,...this.tempAptitudeImg]
							para.longitude = this.editForm.grid.split(',')[0]
							para.latitude = this.editForm.grid.split(',')[1]
							updateEnterShop(para).then((res) => {
								this.editLoading = false;
								this.editFormVisible = false;
								if (res.code == 0) {
									this.$message({
										message: '提交成功',
										type: 'success'
									});
									this.fileList1 = []
									this.fileList2 = []
									this.getUsers();
								}else{
									this.$message({
										message: '提交失败',
										type: 'error'
									});
								}
							});
						});
					}
				});
			},
			selsChange: function (sels) {
				this.sels = sels;
			},
			showCheck:function(type){
				var ids = this.sels.map(item => item.id);
				if (ids.length == 0) {
					this.$message({
						message: '请先选择商家',
						type: 'error'
					});
					return;
				}
				if (type == 2) {
					let para = { ids: ids };
					para.reason = '';
					para.status = 2;
					checkEnterShop(para).then((res) => {
						this.listLoading = false;
						if (res.code == 0) {
							this.$message({
								message: '审核成功',
								type: 'success'
							});
							this.getUsers();
						}else{
							this.$message({
								message: '审核失败',
								type: 'error'
							});
						}
					});
				}else{
					this.checkFormVisible = true;
				}
			},
			//审核
			checkEnterShop: function(type){
				var ids = this.sels.map(item => item.id);
				let para = { ids: ids };
				para.reason = this.checkForm.reason;
				para.status = type;
				checkEnterShop(para).then((res) => {
					this.listLoading = false;
					if (res.code == 0) {
						this.checkFormVisible = false;
						this.$message({
							message: '审核成功',
							type: 'success'
						});
						this.getUsers();
					}else{
						this.$message({
							message: '审核失败',
							type: 'error'
						});
					}
				});
			},
			onSuccess1(response, file, fileList) {
				this.editForm.picss.push(file.response.body);
			},
			onError1(response, file, fileList) {
				this.$message({
					showClose: true,
					message: '图片上传失败！',
					type: 'error'
				});
			},
			handleRemove1(file,fileList){
				this.delPics(file.response.body);
			},
			delPics(value){
				var index = this.editForm.picss.indexOf(value);
				if (index > -1) {
					this.editForm.picss.splice(index, 1);
				};
				
				var tag = this.tempPics.indexOf(value);
				if (tag > -1) {
					this.tempPics.splice(index,1);
				};
			},
			
			delAptitudeImg(value){
				var index = this.editForm.aptitudeImages.indexOf(value);
				if (index > -1) {
					this.editForm.aptitudeImages.splice(index, 1);
				};
				var tag = this.tempAptitudeImg.indexOf(value);
				if (tag > -1) {
					this.tempAptitudeImg.splice(index,1);
				};
			},
			onSuccess2(response, file, fileList) {
				this.editForm.aptitudeImages.push(file.response.body);
			},
			onError2(response, file, fileList) {
				this.$message({
					showClose: true,
					message: '图片上传失败！',
					type: 'error'
				});
			},
			handleRemove2(file,fileList){
				console.log(file)
				this.delAptitudeImg(file.response.body);
			},
			
			/*onSuccessUpdate(response, file, fileList1) {
				this.editForm.image = file.response.body;
			},
			onErrorUpdate(response, file, fileList1){
				this.$message({
					showClose: true,
					message: '图片上传失败！',
					type: 'error'
				});
			}*/
		},
		mounted() {
			this.getUsers();
			this.getTypeList();
			this.getArea(1,0);
		}
	}

</script>

<style scoped>


</style>
